<template>
   <a-modal  :visible="visible"  width="800px" >
    <a-row class="j-modal-title-row" type="flex">
        <a-col class="left">
          <slot name="title">设置经纬度</slot>
        </a-col> 
      </a-row>
    <div id="map" style="width:100%;height:400px;"></div> 
    经：{{longitude}} 纬：{{latitude}}
      <div slot="footer" class="dialog-footer">
        <a-button
          size="small"
          type="primary" 
          @click="btnSubmit()"
          >确 认</a-button
        >
        <a-button size="small" @click="close()">取 消</a-button>
      </div> 
  </a-modal>
</template>

<script>

  export default {
    name: 'LampModal',
    data () {
      return {
        title:'',
        width:800,
        visible: false,
        disableSubmit: false,
         map: null,
        local: null,
        mk: null,
        latitude: '',//纬
        longitude: '',//经
        keyWords: ''

      }
    },
    methods: {
      openDialog (longitude,latitude) {  
        this.visible=true
        this.longitude = longitude||112.45828
        this.latitude = latitude||34.624627
        this.initMap();
      }, 
       initMap() {
           var that= this;
        this.$nextTick(() => {
              // 2. 创建地图示例
                that.map = new window.BMapGL.Map('map')
                // 3. 设置中心点坐标
                var point = new window.BMapGL.Point(this.longitude,this.latitude)
                // 4. 地图初始化，同时设置地图展示级别
                 this.map.centerAndZoom(point, 17.9)
                // 5. 开启鼠标滚轮缩放
                 this.map.enableScrollWheelZoom(true)
                var scaleCtrl = new window.BMapGL.ScaleControl() // 添加比例尺控件
                 this.map.addControl(scaleCtrl)
                var zoomCtrl = new window.BMapGL.ZoomControl() // 添加缩放控件
                 this.map.addControl(zoomCtrl)
                var cityCtrl = new window.BMapGL.CityListControl() // 添加城市列表控件
                 this.map.addControl(cityCtrl) 
                // 创建一个点
                var point1 = new window.BMapGL.Point(this.longitude,this.latitude); 
                var marker = new window.BMapGL.Marker(point1,{ enableDragging: true});// 创建标注    
                this.map.addOverlay(marker); 

                that.map.addEventListener("click", function(e){
                    var pp = e.latlng  
                    that.longitude = pp.lng;
                    that.latitude = pp.lat;
                });
              //this.addMarker(point,3)
        }); 
       },
    addMarker(point, index){  // 创建图标对象   
            var myIcon = new window.BMapGL.Icon("markers.png", new BMap.Size(23, 25), {    
                // 指定定位位置。   
                // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
                // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
                // 图标中央下端的尖角位置。    
                anchor: new window.BMapGL.Size(10, 25),    
                // 设置图片偏移。   
                // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
                // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
                imageOffset: new window.BMapGL.Size(0, 0 - index * 25)   // 设置图片偏移    
            });      
            // 创建标注对象并添加到地图   
            var marker = new window.BMapGL.Marker(point, {icon: myIcon});    
            this.map.addOverlay(marker);  
       },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      btnSubmit () {
          this.$emit('ok',this.longitude,this.latitude);
        this.visible = false;
      }, 
      handleCancel () {
        this.close()
      }
    }
  }
</script>